<template>
  <div class="card">
    <div class="img_block">
      <img :src="goods.imgUrl" alt="暂无图片">
    </div>
    <div class="des_block">
      <span>{{ goods.description }}</span>
    </div>
    <div class="price_block">
      ￥<span>{{ goods.price }}</span>
      销量:{{ goods.salesCount }}
    </div>
  </div>
</template>

<script>
export default {
  name: 'goods_card',
  data: function () {
    return {
      goods: {
        imgUrl: '',
        description: '',
        price: '',
        salesCount: ''
      }
    }
  },
  // 父子组件通信，父组件可以借助于子组件的属性，给子组件进行传值，
  // 前提是在子组件中，通过props选项设置子组件的属性名
  props: {
    goods: {}
  }
}
</script>

<style>
.card {
  border: 1px solid red;
  width: 100px;
  height: 200px;
  margin-right: 10px;
}

.img_block {
  height: 110px;
}

.price_block {
  color: red;
}
</style>